<template>
    <div>
      <h1>评论管理</h1>
      <table>
        <thead>
          <tr>
            <th>评论内容</th>
            <th>电影 ID</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="comment in comments" :key="comment.cid">
            <td>{{ comment.content }}</td>
            <td>{{ comment.vid }}</td>
            <td>
              <button @click="deleteComment(comment.cid)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  import commentService from '@/api/comment.js';
  export default {
    data() {
      return {
        comments: [] 
      };
    },
    async created() {
      await this.fetchComments(); // 获取评论
    },
    methods: {
      async fetchComments() {
        this.comments = await commentService.fetchAllComments(); // 使用服务获取评论
      },
      
      async deleteComment(cid) {
        if (confirm('确定要删除这条评论吗？')) {
          await commentService.deleteComment(cid); // 使用服务删除评论
          this.comments = this.comments.filter(comment => comment.cid !== cid); // 更新评论列表
        }
      }
    }
  };
  </script>
  
  <style scoped>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
  }
  button {
    background-color: #ff4d4d;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }
  button:hover {
    background-color: #ff1a1a;
  }
  </style>